<template>
    <div class="resetPsw">
        <div class="main">
            <div class="psw">
                <van-form>
                    <van-field
                        v-model="newPsw"
                        :type="checked?'text':'password'"
                        name="newPsw"
                        placeholder="输入新密码"
                        autocomplete
                    />
                    <van-field
                        v-model="confirmPsw"
                        :type="checked?'text':'password'"
                        name="密码"
                        placeholder="确认新密码"
                        autocomplete
                    />
                </van-form>
            </div>
            <div class="info">
                <div>必须是6-20个英文字母、数字或符号(除空格),且字母、数字和标点符号至少包含两种</div>
                <van-checkbox v-model="checked" checked-color="#02b6fd">显示密码</van-checkbox>
            </div>
            <van-button class="next" 
                :disabled="newPsw&&confirmPsw?false:true"
                size="normal" 
                color="#02b6fd"
                block
                @click="onResetPsw"
            >下一步</van-button>
        </div>
    </div>
</template>

<script>
import { showToast, showLoadingToast } from 'vant';
import { ref } from 'vue';
import {resetPsw} from '@/api/user';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
export default {
    name:'ResetPsw',
    setup() {
        const route = useRoute();
        const router = useRouter();
        const store = useStore();
        const newPsw = ref('');
        const confirmPsw = ref('');
        const checked = ref(false);
        const onResetPsw = () => {
            let reg = new RegExp(/(?![\d]+$)(?![a-zA-Z]+$)(?![\da-zA-Z]+$).{6,20}$/);
            console.log(newPsw.value,confirmPsw.value)
            if(newPsw.value != confirmPsw.value){
                showToast('您输入的密码不一致，请重新输入');
            }
            else if(reg.test(newPsw) == false){
                showToast('您的密码等级太低，请重新设置');
            }
            else{
                console.log(localStorage.getItem('userId'));
                resetPsw({
                    type:'phone',
                    id:localStorage.getItem('userId'),
                    password:newPsw.value
                }).then(res=>{
                    console.log(res);
                    if(res.code == '1300'){
                        showLoadingToast({
                            message: '加载中...',
                            forbidClick: true,
                            duration:2000
                        });
                        setTimeout(() => {
                            router.go(-3);
                        }, 2000);
                    }
                    else{showToast(res.message);}
                }).catch(error=>{
                    console.log(error);
                })
            }
        }
        return {
            newPsw,
            confirmPsw,
            checked,
            onResetPsw
        };
    },
    components:{
        
    }
}
</script>

<style>
.resetPsw{
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #fff;
    box-sizing: border-box;
}
.resetPsw .main{
    padding: 50px 15px 0;
    box-sizing: border-box;
    width: 100%;
}
.resetPsw .main .van-field{
    padding: 10px 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #aaa;
}
.resetPsw .main .van-field:after{
    border-bottom: 0;
}
.resetPsw .main .info{
    font-size: 14px;
}
.resetPsw .main .info>div{margin-bottom: 10px;}
.resetPsw .main .info .van-checkbox{
    align-items: center;
}
.resetPsw .main .van-button{margin-top: 25px;}
.van-cell-group{margin: 0;}
:root{--van-checkbox-size:14px}
</style>